<style scoped>
.time {
    font-size: 14px;
    font-weight: bold;
}

.copyright {
    text-align: center;
    margin: 70px 0 0 0;
}

.steps-main {
    height: 80px;
}
</style>
<template>
    <div>


        <div class="i-layout-content-main">
          <el-row>
            <el-col :span="19">
              <div class="i-layout-content-main-left">
                <router-view />
                <div class="copyright">Copyright © 2019, Shanghai YiFa Co., Ltd. All Rights Reserved. 上海颐法信息技术有限公司
                    <br /> <a href="https://beian.miit.gov.cn/" target="_blank">沪ICP备19042106号-2</a>
                </div>
              </div>
            </el-col>
            <el-col :span="4" :offset="1">
              <div class="i-layout-content-main-right" ref="stepBar">
                <el-card :bordered="false">
                    <el-timeline>
                        <el-timeline-item :color="stepColor(index)" v-for="(item, index) in steps" :key="index">
                            <p class="time">{{ stepInfo[item].title }}</p>
                            <p class="content">{{ stepInfo[item].desc }}</p>
                        </el-timeline-item>
                    </el-timeline>
                    <!--<el-steps :current="whichStep()" direction="vertical">
                        <el-step v-for="(item, index) in steps" :key="index"
                        :title="stepInfo[item].title" class="steps-main"></el-step>
                    </el-steps>-->
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
    </div>
</template>
<script>
export default {
    components: {

    },
    /*为子路由提供一些共有函数*/
    provide() {
        return {
            next: this.next,
            back: this.back
        }
    },
    data() {
        let formStep = [
            "doc-filter",
            'form',
            'confirm',
            'pay'
            /*,
                        'delivery'*/
        ];

        let noFormStep = [
            "doc",
            'confirm',
            'pay'
            /*,
                        'delivery'*/
        ];

        return {
            steps: [],
            flow: {
                "civil-action": formStep,
                "stock-company-non-lawsuit": formStep,
                "limited-company-non-lawsuit": noFormStep,
                "high-frequency-contract": noFormStep
            },
            stepInfo: {
                "doc-filter": {
                    title: "筛选/选择文件",
                    //desc: "根据指定条件筛选出相关文件"
                },
                "doc": {
                    title: "选择文件",
                    //desc: "选定所需文件"
                },
                "form": {
                    title: "填写信息",
                    //desc: "根据选择的文件模板，组合生成必要的表单"
                },
                "confirm": {
                    title: "预览/确认订单",
                    //desc: "检查生成的表单是否符合要求，并确认下单"
                },
                "pay": {
                    title: "支付/发送",
                    //desc: "支付并发送邮件"
                }
                /*,
                                "delivery": {
                                    title: "发送",
                                    desc: "发送文档"
                                },*/
            }
        }
    },
    created() {
        this.listenerFunction();
    },
    beforeDestroy() {
        document.removeEventListener("scroll", this.listenerFunction);
    },
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
    },
    watch: {
        $route(to) {
            this.init();
        }
    },
    computed: {

    },
    methods: {
        init() {
            let docType = this.$route.params.docType;
            this.steps = this.flow[docType];
        },
        stepColor(stepIndex) {
            let nowRouteName = this.$route.name;
            let nowStep = this.nowStep(nowRouteName);

            if (nowStep !== undefined && stepIndex === nowStep) {
                return "green";
            }
            return "#dcdee2";
        },
        next(nowRouteName, param) {
            let current = this.nowStep(nowRouteName);
            this.$router.push({ name: this.steps[current + 1], params: param });
        },
        back(nowRouteName) {
            let current = this.nowStep(nowRouteName);
            this.$router.push({ name: this.steps[current - 1] });
        },
        nowStep(nowRouteName) {
          if(this.steps === undefined) {
            return;
          }

            let nowStep = this.steps.findIndex((value, index, arr) => {
                return value === nowRouteName;
            });
            return nowStep;
        },
        whichStep() {
        	let nowRouteName = this.$route.name;
            return this.nowStep(nowRouteName);
        },
        listenerFunction(e) {
            document.addEventListener('scroll', this.handleScroll, true);
        },
        handleScroll() {
          return;
            if (!this.$refs.stepBar) return;
            let stepbarDom = this.$refs.stepBar.getBoundingClientRect();
            //console.log(stepbarDom.top);
            if (document.documentElement.scrollTop >= 48) {
                this.$refs.stepBar.style.position = 'fixed';
                this.$refs.stepBar.style.top = '70px';
            } else {
                this.$refs.stepBar.style.position = 'absolute';
                this.$refs.stepBar.style.top = '118px';
            }
        }

    }
}
</script>